<template>
  <view class="my-page">
    <!-- 顶部个人信息区域 -->
    <view class="user-header">
      <!-- 头像 -->
      <image class="avatar" src="/static/tab_icon/自拍.png" mode="aspectFill"></image>
      
      <!-- 姓名和学号 -->
      <view class="user-info">
        <text class="user-name">石央平</text>
        <text class="user-id">学号：2531010120135</text>
      </view>
    </view>

    <!-- 分割线 -->
    <view class="divider"></view>

    <!-- 设置列表区域 -->
    <view class="setting-container">
      <!-- 第一组设置项 -->
      <view class="setting-group">
        <view class="setting-item">
          <image class="setting-icon" src="/static/icon-collect.png" mode="widthFix"></image>
          <text class="setting-text">我的收藏</text>
          <image class="arrow-right" src="/static/icon-arrow.png" mode="widthFix"></image>
        </view>
        
        <view class="setting-item">
          <image class="setting-icon" src="/static/icon-service.png" mode="widthFix"></image>
          <text class="setting-text">联系客服</text>
          <image class="arrow-right" src="/static/icon-arrow.png" mode="widthFix"></image>
        </view>
        
        <view class="setting-item">
          <image class="setting-icon" src="/static/icon-safety.png" mode="widthFix"></image>
          <text class="setting-text">账号安全</text>
          <image class="arrow-right" src="/static/icon-arrow.png" mode="widthFix"></image>
        </view>
      </view>

      <!-- 分割线 -->
      <view class="group-divider"></view>

      <!-- 第二组设置项 -->
      <view class="setting-group">
        <view class="setting-item">
          <image class="setting-icon" src="/static/icon-about.png" mode="widthFix"></image>
          <text class="setting-text">关于我们</text>
          <image class="arrow-right" src="/static/icon-arrow.png" mode="widthFix"></image>
        </view>
        
        <view class="setting-item logout-item">
          <image class="setting-icon" src="/static/icon-logout.png" mode="widthFix"></image>
          <text class="logout-text">退出登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 静态页面，无需额外逻辑（若需添加之前的用户数据存储逻辑，可参考上一轮回复）
</script>

<style scoped>
/* 页面整体样式 */
.my-page {
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* 顶部个人信息区域 */
.user-header {
  display: flex;
  align-items: center;
  padding: 30rpx 24rpx;
  background-color: #ffffff;
}

/* 头像样式 */
.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 4rpx solid #f0f0f0;
}

/* 个人信息文本容器 */
.user-info {
  margin-left: 24rpx;
}

/* 姓名样式 */
.user-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  display: block;
  margin-bottom: 8rpx;
}

/* 学号样式 */
.user-id {
  font-size: 26rpx;
  color: #666666;
}

/* 分割线 */
.divider {
  height: 12rpx;
  background-color: #f8f8f8;
}

/* 设置列表容器 */
.setting-container {
  background-color: #ffffff;
  margin: 0 24rpx;
  border-radius: 20rpx;
  margin-top: 20rpx;
  overflow: hidden;
}

/* 设置项组 */
.setting-group {
  padding: 16rpx 0;
}

/* 单个设置项 */
.setting-item {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  justify-content: space-between;
}

/* 设置项图标 */
.setting-icon {
  width: 36rpx;
  height: 36rpx;
}

/* 设置项文本 */
.setting-text {
  font-size: 28rpx;
  color: #333333;
  margin-left: 20rpx;
  flex: 1;
}

/* 右箭头图标 */
.arrow-right {
  width: 24rpx;
  height: 24rpx;
  opacity: 0.5;
}

/* 组之间的分割线 */
.group-divider {
  height: 2rpx;
  background-color: #f0f0f0;
  margin: 0 24rpx;
}

/* 退出登录项 */
.logout-item {
  margin-top: 8rpx;
}

/* 退出登录文本 */
.logout-text {
  font-size: 28rpx;
  color: #ff4d4f;
  margin-left: 20rpx;
  flex: 1;
}
</style>